import React, {PureComponent} from 'react';
import {Toast, InputItem, WhiteSpace, Button} from 'antd-mobile';
import {Link, Control} from 'react-keeper';
import {createForm} from 'rc-form';
import './index.less';

import Logo from 'Image/logo.gif';
import loginSvg from 'Image/a568162c2e16b799f5d56634d9e23e46.svg';
import HeadNavBar from "Components/HeadNavBar";

const style = {
  height: 40,
  fontSize: 12,
  backgroundColor: 'initial'
};


class LoginForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      requesting: false
    };
  }

  componentWillUpdate() {
  }

  bindRegister = () => {
    Control.go('/user/register');
  };
  bindLeftClick = () => {
    Control.go('/');
  };
  // bindPhoneChick = (arg) => {
  //   if (arg === '') {
  //     return;
  //   }
  //   const value = arg.replace(/\s/g, '');
  //   if (!(/^1*\d{10}$/.test(value))) {
  //
  //     Toast.fail('手机格式错误');
  //   }
  // };

  bindPhoneChick = (rule, value = '', callback) => {
    if (value === '') {
      callback('手机号不能为空');
    }
    const re = /^1\d{10}$/;
    if (!re.test(value.replace(/\s/g, ''))) {
      callback('手机格式错误');
    }
    callback();
  };

  onSubmit = (e) => {
    const {form} = this.props;
    e.preventDefault();
    form.validateFields((error, values) => {
      if (!error) {
        console.log('ok', values);
      } else {
        let errStr = '';
        Object.keys(error).map(key => errStr += form.getFieldError(key).join(' ') + ' ');
        Toast.fail(errStr, 2, () => {
        }, true);
      }
    });
  };

  render() {
    const {getFieldProps} = this.props.form;

    return (
      <div>
        <HeadNavBar
          style={style}
          title='登录'
          mode='light'
          icon='&#xe61a;'
          bindLeftClick={this.bindLeftClick}
        />
        <div id='loginDIV' style={{backgroundImage: "url(" + loginSvg + ")"}}>
          <div className="login-box">
            <div className='login'>
              <div className="logo">
                <img src={Logo} alt="logo"/>
                <span>商城 H5</span>
              </div>
              <form>
                <InputItem
                  className='login-input'
                  type='phone'
                  placeholder="手机号"
                  clear={true}
                  // onBlur={this.bindPhoneChick}
                  {...getFieldProps('phone', {
                    rules: [
                      {validator: this.bindPhoneChick}
                    ],
                  })}
                >
                  <i className='iconfont'>&#xe620;</i>
                </InputItem>
                <InputItem
                  className='login-input'
                  type='password'
                  placeholder="密码"
                  clear={true}
                  {...getFieldProps('password', {
                    rules: [
                      {required: true, message: '密码不能为空'},
                    ],
                  })}
                >
                  <i className='iconfont'>&#xe614;</i>
                </InputItem>
                <WhiteSpace size="lg"/>
                <div className='forget'>忘记密码?</div>
                <WhiteSpace size="md"/>
                <Button type="primary" disabled={this.state.requesting}
                        onClick={this.onSubmit}>登录</Button>
                <WhiteSpace size="md"/>
                <Button type="default"
                        onClick={this.bindRegister}>新用户注册</Button>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const Index = createForm()(LoginForm);
export default Index;
